'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { 
  FolderOpen, 
  CheckSquare, 
  Bug, 
  TestTube, 
  Users, 
  TrendingUp,
  Clock,
  AlertCircle,
  CheckCircle
} from 'lucide-react'

export function Dashboard() {
  // 模拟数据
  const stats = [
    {
      title: '我的项目',
      value: '12',
      icon: FolderOpen,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50'
    },
    {
      title: '待办任务',
      value: '24',
      icon: CheckSquare,
      color: 'text-green-600',
      bgColor: 'bg-green-50'
    },
    {
      title: '未解决缺陷',
      value: '8',
      icon: Bug,
      color: 'text-red-600',
      bgColor: 'bg-red-50'
    },
    {
      title: '待执行测试',
      value: '15',
      icon: TestTube,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50'
    }
  ]

  const recentProjects = [
    {
      name: '电商平台重构',
      key: 'ECOM',
      progress: 75,
      status: 'active',
      members: 8,
      tasks: { total: 45, completed: 34 }
    },
    {
      name: '移动APP开发',
      key: 'MOBILE',
      progress: 45,
      status: 'active',
      members: 6,
      tasks: { total: 32, completed: 14 }
    },
    {
      name: '数据中台建设',
      key: 'DATA',
      progress: 90,
      status: 'active',
      members: 12,
      tasks: { total: 68, completed: 61 }
    }
  ]

  const recentActivities = [
    {
      type: 'task',
      action: '完成了任务',
      target: '用户登录功能开发',
      project: '电商平台重构',
      time: '2小时前',
      user: '张三'
    },
    {
      type: 'bug',
      action: '创建了缺陷',
      target: '支付页面显示异常',
      project: '移动APP开发',
      time: '4小时前',
      user: '李四'
    },
    {
      type: 'requirement',
      action: '更新了需求',
      target: '订单管理模块优化',
      project: '电商平台重构',
      time: '6小时前',
      user: '王五'
    }
  ]

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">工作台</h1>
          <p className="text-gray-600">欢迎回来，这里是您的项目概览</p>
        </div>
        <Button>
          <TrendingUp className="h-4 w-4 mr-2" />
          查看报表
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <Card key={index}>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                </div>
                <div className={`p-3 rounded-lg ${stat.bgColor}`}>
                  <stat.icon className={`h-6 w-6 ${stat.color}`} />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 项目进度 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <FolderOpen className="h-5 w-5 mr-2" />
              项目进度
            </CardTitle>
            <CardDescription>您参与的项目进度概览</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {recentProjects.map((project, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <span className="font-medium text-gray-900">{project.name}</span>
                    <Badge variant="outline" className="text-xs">
                      {project.key}
                    </Badge>
                  </div>
                  <div className="flex items-center space-x-2 text-sm text-gray-500">
                    <Users className="h-4 w-4" />
                    <span>{project.members}</span>
                  </div>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600">
                    {project.tasks.completed}/{project.tasks.total} 任务完成
                  </span>
                  <span className="font-medium">{project.progress}%</span>
                </div>
                <Progress value={project.progress} className="h-2" />
              </div>
            ))}
          </CardContent>
        </Card>

        {/* 最近活动 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Clock className="h-5 w-5 mr-2" />
              最近活动
            </CardTitle>
            <CardDescription>团队的最新动态</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {recentActivities.map((activity, index) => (
              <div key={index} className="flex items-start space-x-3">
                <div className="flex-shrink-0">
                  {activity.type === 'task' && (
                    <CheckCircle className="h-5 w-5 text-green-600" />
                  )}
                  {activity.type === 'bug' && (
                    <AlertCircle className="h-5 w-5 text-red-600" />
                  )}
                  {activity.type === 'requirement' && (
                    <CheckSquare className="h-5 w-5 text-blue-600" />
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm text-gray-900">
                    <span className="font-medium">{activity.user}</span>
                    <span className="mx-1">-</span>
                    <span>{activity.action}</span>
                    <span className="font-medium mx-1">{activity.target}</span>
                  </p>
                  <p className="text-xs text-gray-500">
                    {activity.project} · {activity.time}
                  </p>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      {/* 快速操作 */}
      <Card>
        <CardHeader>
          <CardTitle>快速操作</CardTitle>
          <CardDescription>快速访问常用功能</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Button variant="outline" className="h-20 flex-col">
              <CheckSquare className="h-6 w-6 mb-2" />
              <span>创建任务</span>
            </Button>
            <Button variant="outline" className="h-20 flex-col">
              <Bug className="h-6 w-6 mb-2" />
              <span>报告缺陷</span>
            </Button>
            <Button variant="outline" className="h-20 flex-col">
              <TestTube className="h-6 w-6 mb-2" />
              <span>创建测试</span>
            </Button>
            <Button variant="outline" className="h-20 flex-col">
              <FolderOpen className="h-6 w-6 mb-2" />
              <span>新建项目</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}